<template>
  <div id="app">
    <div class="nav_wrap">
      <router-link to="/">HOME</router-link>
      <router-link to="/Past">PAST</router-link>
      <router-link to="/Soon">SOON</router-link>
      <router-link to="/SignUp">SIGNUP</router-link>
    </div>
    <router-view class="content-view"></router-view>
    <!-- 如果把底部写在一个vue文件中，再以组件的形式引入为什么不行 -->
    <foot/>
  </div>
</template>


<script>
  //第一种定义组件的方法（用extend）注册一个组件
  // import Vue from "vue";
  // var Footer = Vue.extend({
  //   template:
  //   '<div class="footer">'+
  //     '<p>Copyright©1999-2017, www.wangry.com. All rights reserved. </p>'+
  //   '</div>'
  // })
  //第二种引入组件的方法（用vue作为一个组件并注册）

  /*使用组件的流程总结：
  1、引入组件（1）引入Vue，用Vue.extend注册一个组件（2）引入外部的vue文件作为组件
  2、注册组件；在export default中注册组件名，注意：自定义组件名不要使用保留字如footer
  3、在html中使用自定义组件（1）<foot></foot>（2）<foot/>
  */
  import Footer from "./components/Footer";
  var $ = require('../node_modules/jquery/dist/jquery.min.js');
  export default {
    name: 'app',
    components:{
      foot:Footer
    },
    mounted(){
      $(".nav_wrap a").click(function(){
        $(".nav_wrap a").css({"color":"black"});
        $(this).css({"color":"red"});
      });
    }
  }
</script>
<!-- 全局样式 -->
<style>
  *{
    margin: 0;
    padding: 0;
  }
  h1, h2 {
    font-weight: normal;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  .nav_wrap{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10000;
  }
  .img_show_wrap{
    width: 100%;
  }
  .content-view{
    padding-top: 58px;
    width: 100%;
    margin: 0 auto;
    max-width: 1200px;
  }
</style>
<!-- 组件样式 -->
<style scoped>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    color: #2c3e50;
    text-align: center;
  }
  .nav_wrap{
    width: 100%;
    background-color: #ccc;
  }
  a{
    text-decoration: none;
    margin-left: 40px;
    margin-right: 40px;
    padding-top: 20px;
    padding-bottom: 20px;
    display: inline-block;
    color: black;
  }
  a:hover{
    color:red;
  }
  
  @media screen and (max-width: 768px) {
    a{
      text-decoration: none;
      margin-left: 10px;
      margin-right: 10px;
      padding-top: 15px;
      padding-bottom: 15px;
      display: inline-block;
      color: black;
    }
    .content-view{
      padding-top: 48px;
    }
    h1,.img_show_wrap h1{
      font-size: 15px;
    }
  }
</style>
